<template>
  <view class="page-rma-info" v-if="data">
    <view class="list">
      <view class="head">
        <view class="title">{{ $t('account.rmas.form.text_type') }}：{{ getTypeName(data.type) }}</view>
        <view class="status_name">{{ $t('common.text_status') }}：{{ data.status_format }}</view>
      </view>
      <view class="product-info">
        <view class="product">{{ data.product_name }}</view>
        <view class="color-x">{{ $t('account.rmas.form.text_quantity') }}：{{ data.quantity }}</view>
        <view class="color-x">{{ $t('account.rmas.form.text_opened') }}：{{ data.opened ? $t('common.text_yes') : $t('common.text_no') }}</view>
        <view class="color-x">{{ $t('account.rmas.form.reason_value') }}：{{ data.reason }}</view>
        <view class="color-x">{{ $t('common.updated_at') }}：{{ data.created_at }}</view>
      </view>
    </view>
    <view class="list" v-if="data.comment">
      <view class="head"><view class="title">{{ $t('account.rmas.form.text_comment') }}</view></view>
      <view class="info">{{ data.comment }}</view>
    </view>
    <view class="list" v-if="data.histories">
      <view class="head"><view class="title">{{ $t('account.return.info.history') }}</view></view>
      <view class="info">
        <view class="histories-list" v-for="item, index in data.histories" :key="index">
          <view class="color-x">{{ $t('account.return.info.date') }}{{ item.date_added }}</view>
          <view class="color-x">{{ $t('account.return.info.status') }}{{ item.status_name }}</view>
          <view class="color-x color-y no-m">{{ $t('account.return.info.comment') }}{{ item.comment }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const settings = uni.getStorageSync('settings');
const getTypeName = (type) => {
  return settings.rma_types[type] || ''
}

let id = 0

const data = ref(null)

onLoad(e => {
  id = e.id || 0

  if (e.id) {
    loadData()
  }
})

const loadData = () => {
  proxy.$http.get(`rmas/${id}`).then(res => {
    data.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.list {
  margin-top: 20rpx;
  background: #fff;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.title {
  font-size: 26rpx;
}

.head .status_name {
  font-size: 24rpx;
  color: rgb(219, 33, 33);
}

.product-info {
  padding: 20rpx;
  font-size: 24rpx;
}

.product-info .product {
  margin-bottom: 14rpx;
}

.color-x {
  color: #666;
  margin-bottom: 14rpx;
}

.color-y {
  color: #000;
}

.no-m {
  margin-bottom: 0 !important;
}

.no-p {
  padding-bottom: 0 !important;
}

.info {
  padding: 20rpx;
  font-size: 24rpx;
  color: #666;
}

.histories-list {
  border-bottom: 1rpx solid #f4f4f4;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
}

.histories-list:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
</style>
